<!--
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2023-12-19 14:41:48
 * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @LastEditTime: 2024-06-04 14:55:38
 * @FilePath: \cxl-driving-training\src\views\clueManagement\clue\Index.vue
-->
<template>
    <div class="page-box">
        <TemplateVue
            :page="data.pageData"
            @search="data.onSearch"
            @reset="data.onReset"
            @paginationChange="data.onPaginationChange"
            @paginationSize="data.onPaginationSize"
            @operation="data.onOperation"
            @multiSelection="data.onMultiSelection"
        >
        </TemplateVue>

        <!-- 跟进弹窗 -->
        <BasicDialogVue :data="data.dialog" @close="data.onCloseDialog(dialogForm)">
            <template #content>
                <div class="clue-container">
                    <el-form ref="dialogForm" :model="data.dialogForm" label-width="100px">
                        <el-form-item label="跟进状态：">
                            <el-select clearable v-model="data.dialogForm.followStatus">
                                <el-option
                                    v-for="itemOption in data.followStatus"
                                    :key="itemOption.value"
                                    :label="itemOption.label"
                                    :value="itemOption.value"
                                />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="备注：">
                            <el-input
                                v-model="data.dialogForm.remark"
                                type="textarea"
                                clearable
                                placeholder="请输入备注说明"
                            />
                        </el-form-item>
                    </el-form>
                    <h1 v-if="data.activities.length">跟进记录</h1>
                    <div class="progress">
                        <el-timeline>
                            <el-timeline-item v-for="(activity, index) in data.activities" :key="index">
                                <template #default>
                                    <div class="timeline-item">
                                        <p>
                                            {{ activity.followTime }} <i> {{ activity.follower }}</i>
                                            <!-- <span>已处理</span> -->
                                        </p>
                                        {{ activity.followMsg }}
                                    </div>
                                </template>
                            </el-timeline-item>
                        </el-timeline>
                    </div>
                </div>
                <div class="btn">
                    <el-button @click="data.onCloseDialog(dialogForm)">取消</el-button>
                    <el-button type="primary" @click="data.submitForm(dialogForm)">确定</el-button>
                </div>
            </template>
        </BasicDialogVue>

        <!-- 同步弹出 -->
        <SyncVue :visible="data.syncDialog.visible" @close="data.onCloseSyncDialog()" />

        <!-- 详情弹窗 -->
        <DetailVue
            :data="data.detailData"
            :visible="data.detailDialog.visible"
            :propName="data.detailDataPropName"
            @close="data.onClosedetailDialog()"
        ></DetailVue>

        <!-- 分配弹窗 -->
        <AllocateVue
            :clueIds="data.multiSelectionData"
            :visible="data.allocateDialog.visible"
            @close="data.onCloseAllocateDialog()"
        />

        <!-- 编辑数据弹窗 -->
        <EditVue :data="data.editDialog" @close="data.onCloseEditDialog()"></EditVue>
    </div>
</template>
<script setup lang="ts">
import TemplateVue from '@/components/template/Index.vue'
import ClueListData from '.'
import { reactive, ref } from 'vue'
import BasicDialogVue from '@/components/baseDialog/Index.vue'
import DetailVue from '../detail/Index.vue'
import AllocateVue from './Allocate.vue'
import SyncVue from './Sync.vue'
import EditVue from './EditClue.vue'

const dialogForm = ref()
const data = reactive(new ClueListData())
</script>

<style scoped lang="scss">
.time {
    display: flex;
}
.btn {
    display: flex;
    justify-content: center;
    margin: 40px 0 16px 0;
}

.clue-container {
    h1 {
        font-size: 14px;
        font-weight: bold;
        color: #666;
        box-sizing: border-box;
        padding-left: 20px;
    }
    .progress {
        box-sizing: border-box;
        padding: 16px 0 0 100px;
    }
}
.timeline-item {
    i {
        font-weight: bold;
        margin: 0 6px;
    }
    p {
        margin-bottom: 10px;
    }
}
</style>
